
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="demo.css"/>
</head>

<body>
<div class="wrap">
    <div id="j_formAdd" class="form-add">
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
    </div>
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
    </div>
</div>
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>学习情况</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>JavaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td class="get">get</td>
        </tr>
        <tr>
            <td>css</td>
            <td>传智播客-前端与移动开发学院</td>
            <td class="get">get</td>
        </tr>
        <tr>
            <td>html</td>
            <td>传智播客-前端与移动开发学院</td>
            <td class="get">get</td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>传智播客-前端与移动开发学院</td>
            <td class="get">get</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
        var gets = document.getElementsByClassName("get");
        //封装通过id获取元素的方法$()
        function $(id){
            return document.getElementById(id);
        }

        // 获取到添加按钮，并绑定单击事件
        $("j_btnAddData").onclick = function(){
            var txtLesson = $("j_txtLesson").value;
            var txtBelSch = $("j_txtBelSch").value;
            var newTr = document.createElement("tr");
            var newTdLesson = document.createElement("td");
            var newTdBelSch = document.createElement("td");
            var newTdGet = document.createElement("td");
            newTdLesson.innerHTML = txtLesson;
            newTdBelSch.innerHTML = txtBelSch;
            newTdGet.innerHTML = "get";
            newTdGet.className = "get";
            newTr.appendChild(newTdLesson);
            newTr.appendChild(newTdBelSch);
            newTr.appendChild(newTdGet);
            $("j_tb").appendChild(newTr);
        }
        for (var i = 0; i < gets.length; i++) {
            gets[i].onclick = function(){
                this.parentNode.parentNode.removeChild(this.parentNode)
            }
        }
</script>

</body>
</html>
